<template>
  <div class="about-page">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <h1 class="project-title">Vue3 Admin 管理系统</h1>
        <p class="project-subtitle">基于 Vue3 前端管理系统</p>
        <div class="project-meta">
          <el-tag type="success" size="large">Vue3</el-tag>
          <el-tag type="warning" size="large">TypeScript</el-tag>
          <el-tag type="primary" size="large">Element Plus</el-tag>
        </div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="content-container">

      <!-- 技术栈 -->
      <div class="tech-stack">
        <!-- 前端技术栈 -->
        <el-card class="tech-card">
          <template #header>
            <div class="card-header">
              <el-icon><Monitor /></el-icon>
              <span>前端技术栈</span>
            </div>
          </template>
          <div class="tech-list">
            <div class="tech-category">
              <h4>核心框架</h4>
              <div class="tech-items">
                <el-tag type="success" effect="dark">Vue 3.4+</el-tag>
                <el-tag type="primary" effect="dark">TypeScript 5.0+</el-tag>
                <el-tag type="warning" effect="dark">Vite 5.0+</el-tag>
              </div>
            </div>
            
            <div class="tech-category">
              <h4>UI组件库</h4>
              <div class="tech-items">
                <el-tag type="info" effect="dark">Element Plus 2.4+</el-tag>
                <el-tag type="success" effect="dark">@element-plus/icons-vue</el-tag>
              </div>
            </div>
            
            <div class="tech-category">
              <h4>状态管理</h4>
              <div class="tech-items">
                <el-tag type="danger" effect="dark">Vuex 4.0+</el-tag>
                <el-tag type="warning" effect="dark">Pinia (可选)</el-tag>
              </div>
            </div>
            
            <div class="tech-category">
              <h4>路由管理</h4>
              <div class="tech-items">
                <el-tag type="primary" effect="dark">Vue Router 4.0+</el-tag>
              </div>
            </div>
            
            <div class="tech-category">
              <h4>HTTP客户端</h4>
              <div class="tech-items">
                <el-tag type="success" effect="dark">Axios 1.6+</el-tag>
              </div>
            </div>
            
            <div class="tech-category">
              <h4>样式处理</h4>
              <div class="tech-items">
                <el-tag type="warning" effect="dark">Less</el-tag>
                <el-tag type="info" effect="dark">CSS3</el-tag>
              </div>
            </div>
            
            <div class="tech-category">
              <h4>开发工具</h4>
              <div class="tech-items">
                <el-tag type="danger" effect="dark">ESLint</el-tag>
                <el-tag type="primary" effect="dark">Prettier</el-tag>
                <el-tag type="success" effect="dark">Husky</el-tag>
              </div>
            </div>
          </div>
        </el-card>

        <!-- 后端技术栈 -->
        <el-card class="tech-card">
          <template #header>
            <div class="card-header">
              <el-icon><Server /></el-icon>
              <span>后端技术栈</span>
            </div>
          </template>
          <div class="tech-list">
            <div class="tech-category">
              <h4>核心框架</h4>
              <div class="tech-items">
                <el-tag type="success" effect="dark">Spring Boot 3.0+</el-tag>
                <el-tag type="primary" effect="dark">Spring Security</el-tag>
                <el-tag type="warning" effect="dark">Spring Web</el-tag>
              </div>
            </div>
            
            <div class="tech-category">
              <h4>数据库</h4>
              <div class="tech-items">
                <el-tag type="info" effect="dark">MySQL 8.0+</el-tag>
                <el-tag type="success" effect="dark">MyBatis Plus 3.5+</el-tag>
                <el-tag type="warning" effect="dark">Druid 连接池</el-tag>
              </div>
            </div>
            
            <div class="tech-category">
              <h4>API文档</h4>
              <div class="tech-items">
                <el-tag type="danger" effect="dark">Knife4j 4.0+</el-tag>
                <el-tag type="primary" effect="dark">Swagger 3.0</el-tag>
              </div>
            </div>
            
            <div class="tech-category">
              <h4>缓存</h4>
              <div class="tech-items">
                <el-tag type="success" effect="dark">Redis 6.0+</el-tag>
                <el-tag type="warning" effect="dark">Spring Cache</el-tag>
              </div>
            </div>
            
            <div class="tech-category">
              <h4>认证授权</h4>
              <div class="tech-items">
                <el-tag type="info" effect="dark">JWT</el-tag>
                <el-tag type="danger" effect="dark">Spring Security</el-tag>
              </div>
            </div>
            
            <div class="tech-category">
              <h4>工具库</h4>
              <div class="tech-items">
                <el-tag type="primary" effect="dark">Hutool</el-tag>
                <el-tag type="success" effect="dark">Lombok</el-tag>
              </div>
            </div>
            
            <div class="tech-category">
              <h4>开发工具</h4>
              <div class="tech-items">
                <el-tag type="danger" effect="dark">Maven</el-tag>
                <el-tag type="primary" effect="dark">Git</el-tag>
              </div>
            </div>
          </div>
        </el-card>
      </div>

      <!-- 功能特性 -->
      <el-card class="feature-card">
        <template #header>
          <div class="card-header">
            <el-icon><Star /></el-icon>
            <span>功能特性</span>
          </div>
        </template>
        <div class="feature-grid">
          <div class="feature-item">
            <el-icon class="feature-icon"><User /></el-icon>
            <h4>用户管理</h4>
            <p>完整的用户注册、登录、权限管理功能</p>
          </div>
          <div class="feature-item">
            <el-icon class="feature-icon"><Lock /></el-icon>
            <h4>权限控制</h4>
            <p>基于角色的访问控制(RBAC)，细粒度权限管理</p>
          </div>
          <div class="feature-item">
            <el-icon class="feature-icon"><Monitor /></el-icon>
            <h4>响应式设计</h4>
            <p>支持PC、平板、手机等多种设备访问</p>
          </div>
          <div class="feature-item">
            <el-icon class="feature-icon"><Brush /></el-icon>
            <h4>主题切换</h4>
            <p>支持明暗主题切换，自定义主题色彩</p>
          </div>
          <div class="feature-item">
            <el-icon class="feature-icon"><Flag /></el-icon>
            <h4>国际化</h4>
            <p>支持多语言切换，内置中英文支持</p>
          </div>
          <div class="feature-item">
            <el-icon class="feature-icon"><DataAnalysis /></el-icon>
            <h4>数据管理</h4>
            <p>强大的数据表格、表单、图表展示功能</p>
          </div>
        </div>
      </el-card>

      <!-- 项目结构 -->
      <el-card class="structure-card">
        <template #header>
          <div class="card-header">
            <el-icon><Folder /></el-icon>
            <span>项目结构</span>
          </div>
        </template>
        <div class="structure-content">
          <div class="structure-section">
            <h4>前端目录结构</h4>
            <pre class="code-block">
src/
├── api/           # API接口
├── assets/        # 静态资源
├── components/    # 公共组件
├── layouts/       # 布局组件
├── router/        # 路由配置
├── store/         # 状态管理
├── utils/         # 工具函数
├── views/         # 页面组件
└── plugins/       # 插件配置</pre>
          </div>
          <div class="structure-section">
            <h4>后端目录结构</h4>
            <pre class="code-block">
src/main/java/
├── config/        # 配置类
├── controller/    # 控制器
├── service/       # 业务逻辑
├── mapper/        # 数据访问
├── entity/        # 实体类
├── dto/           # 数据传输对象
├── vo/            # 视图对象
└── utils/         # 工具类</pre>
          </div>
        </div>
      </el-card>

      <!-- 联系方式 -->
      <el-card class="contact-card">
        <template #header>
          <div class="card-header">
            <el-icon><Message /></el-icon>
            <span>联系我们</span>
          </div>
        </template>
        <div class="contact-content">
          <div class="contact-item">
            <el-icon><User /></el-icon>
            <span>开发者：lty</span>
          </div>
          <div class="contact-item">
            <el-icon><Message /></el-icon>
            <span>邮箱：email@example.com</span>
          </div>
          <div class="contact-item">
            <el-icon><Link /></el-icon>
            <span>GitHub：https://github.com</span>
          </div>
          <div class="contact-item">
            <el-icon><Document /></el-icon>
            <span>文档：https://dev.com</span>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
</script>

<style scoped>
.about-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  overflow-y: auto;
}

/* 页面头部 */
.page-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 60px 0;
  text-align: center;
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.project-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0 0 16px 0;
  background: linear-gradient(45deg, #fff, #f0f0f0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.project-subtitle {
  font-size: 1.2rem;
  margin: 0 0 32px 0;
  opacity: 0.9;
}

.project-meta {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* 内容容器 */
.content-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 卡片样式 */
.info-card,
.tech-card,
.feature-card,
.structure-card,
.quick-start-card,
.contact-card {
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  border: none;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.1rem;
  font-weight: 600;
  color: #303133;
}

.card-header .el-icon {
  font-size: 1.2rem;
  color: #409eff;
}

/* 项目介绍 */
.project-intro p {
  line-height: 1.8;
  color: #606266;
  margin: 0 0 16px 0;
  font-size: 1rem;
}

/* 技术栈 */
.tech-stack {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.tech-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.tech-category h4 {
  margin: 0 0 12px 0;
  color: #303133;
  font-size: 1rem;
  font-weight: 600;
}

.tech-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* 功能特性 */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.feature-item {
  text-align: center;
  padding: 24px;
  border-radius: 8px;
  background: #f8f9fa;
  transition: all 0.3s ease;
}

.feature-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.feature-icon {
  font-size: 2.5rem;
  color: #409eff;
  margin-bottom: 16px;
}

.feature-item h4 {
  margin: 0 0 12px 0;
  color: #303133;
  font-size: 1.1rem;
  font-weight: 600;
}

.feature-item p {
  margin: 0;
  color: #606266;
  line-height: 1.6;
}

/* 项目结构 */
.structure-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.structure-section h4 {
  margin: 0 0 16px 0;
  color: #303133;
  font-size: 1.1rem;
  font-weight: 600;
}

.code-block {
  background: #2d3748;
  color: #e2e8f0;
  padding: 16px;
  border-radius: 8px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 0.9rem;
  line-height: 1.5;
  overflow-x: auto;
  margin: 0;
}

/* 快速开始 */
.quick-start-content {
  padding: 20px 0;
}

/* 联系方式 */
.contact-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.contact-item:last-child {
  border-bottom: none;
}

.contact-item .el-icon {
  color: #409eff;
  font-size: 1.2rem;
}

.contact-item span {
  color: #606266;
  font-size: 1rem;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .project-title {
    font-size: 2rem;
  }
  
  .project-subtitle {
    font-size: 1rem;
  }
  
  .tech-stack {
    grid-template-columns: 1fr;
  }
  
  .structure-content {
    grid-template-columns: 1fr;
  }
  
  .feature-grid {
    grid-template-columns: 1fr;
  }
  
  .content-container {
    padding: 20px 16px;
  }
  
  .page-header {
    padding: 40px 0;
  }
}

@media (max-width: 480px) {
  .project-title {
    font-size: 1.8rem;
  }
  
  .project-meta {
    flex-direction: column;
    align-items: center;
  }
  
  .tech-items {
    justify-content: center;
  }
}
</style>
